<template>
  <view class="danmu-container">
    <!-- 弹幕显示区域 -->
    <view class="danmu-area">
      <view 
        v-for="(comment, index) in comments" 
        :key="index"
        class="danmu-item"
        :style="{
          top: `${comment.top}px`,
          color: comment.color,
          animationDuration: `${comment.duration}s`
        }"
      >
        {{ comment.author }}: {{ comment.content }}
      </view>
    </view>
    
    <!-- 输入框 -->
    <view class="input-area">
      <input 
        v-model="inputText" 
        placeholder="发个弹幕吧~" 
        @confirm="sendDanmu"
      />
      <button @click="sendDanmu">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      comments: [],
      colors: ['#FF5C8D', '#00B4D8', '#FFD166', '#06D6A0', '#FF9E00']
    }
  },
  methods: {
    sendDanmu() {
      if (!this.inputText.trim()) return
      
      const newComment = {
        content: this.inputText,
        author: '我',
        top: Math.random() * 200 + 50,
        color: this.colors[Math.floor(Math.random() * this.colors.length)],
        duration: Math.random() * 5 + 5
      }
      
      this.comments.push(newComment)
      this.inputText = ''
      
      // 5秒后移除弹幕
      setTimeout(() => {
        this.comments = this.comments.filter(c => c !== newComment)
      }, newComment.duration * 1000)
    }
  }
}
</script>

<style scoped>
.danmu-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.danmu-area {
  width: 100%;
  height: 200rpx;
  position: relative;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 28rpx;
  animation: danmu linear;
  animation-fill-mode: forwards;
}

@keyframes danmu {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.input-area {
  display: flex;
  padding: 20rpx;
  background: #fff;
}

.input-area input {
  flex: 1;
  height: 60rpx;
  border: 1px solid #ddd;
  border-radius: 30rpx;
  padding: 0 20rpx;
}
</style>